<template>
    <div class="search">
        <div class="header">
            <van-nav-bar
              title=""
              left-text=""
              left-arrow
              @click-left="onClickLeft"
            />
            <h3>搜索</h3>
        </div>
        <form action="/">
            <van-search
              v-model="value"
              show-action
              placeholder="请输入搜索关键词"
              @search="onSearch"
              @cancel="onCancel"
            />
        </form>
        <div class="search_list">
            <span>搜索结果</span>
            <ul>
                <li v-for="(item,i) in saerch_list" :key="i">
                    <router-link :to="{ 
                      path:'/detail', 
                      query:{ article_title:item.article_title,article_content:item.article_content,article_author:item.article_author,article_create_time:item.article_create_time,article_id:item.article_id,article_type:item.article_type }
                    }">
                        <p>{{item.article_title}}</p>
                    </router-link>
                    <hr>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { useRoute } from 'vue-router'
    import { searchFn } from '../api/index'
    import { showToast } from 'vant';
    let value = ref('');
    let saerch_list = ref([]);
    const onClickLeft = () => history.back();
    const onCancel = () => showToast('取消');
    const onSearch = async()=>{
        await searchFn({keyword:value.value}).then(
            (content:any)=>{
                // console.log(content)
                let {result, code} = content;
                // console.log(result,code)
                if(code == 200) {
                    saerch_list.value = result;
                    console.log(saerch_list.value);
                }
            }
        )
    }
</script>

<style lang="less" scoped>
    .search{
        margin: 10px;
        .header{
            display: flex;
            align-items: center;
            h3{
                font-size: 18px;
                margin-left: 160px;
            }
        }
        .search_list{
            margin: 10px;
            span{
                font-size: 20px;
                font-weight: 400;
            }
            ul{
                margin: 10px;
                li{ 
                    p{
                        font-size: 16px;
                        color: #ccc;
                        padding: 5px 0;
                    }
                }
            }
        }
    }
</style>